<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css动画</title>
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background: red;
        animation: myfirst 5s;
        -webkit-animation: myfirst 5s;
        /* Safari and Chrome */
    }
    
    @keyframes myfirst {
        from {
            background: red;
        }
        to {
            background: yellow;
        }
    }
    
    @-webkit-keyframes myfirst
    /* Safari and Chrome */
    
    {
        from {
            background: red;
        }
        to {
            background: yellow;
        }
    }
    </style>
</head>

<body>
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    <div></div>
</body>

</html>
